<template>
  <div class="images">
    <Row >
      <Col :xs="12" :sm="8" :md="6"  class="images-item">
        <div class="images-card ivu-card ivu-card-bordered" >
          <div class="image-add" :style="{ 'background': '#fff url(https://pic.qiantucdn.com/58pic/14/81/70/18c58PICS7V_1024.jpg) no-repeat scroll center center ','background-size': '50%','z-index':2}"  @click="show=true">
          </div>
          <div class="image-header">
            <div class="image-header-img">
            </div>
          </div>
          <div class="image-nores">
            <div class="image-nore">
              <div class="image-header">
                
              </div>
            </div>
            <div class="image-nore-center">
              <div class="image-header">
               
              </div>
            </div>
            <div class="image-nore">
              <div class="image-header">
                
              </div>
            </div>
            <div style=" clear: both;"></div>
          </div>
          <div >
            <Button type="primary" long>SUBMIT</Button>
          </div>
        </div>
      </Col>

      <Col :xs="12" :sm="8" :md="6"  v-for="item in photos" class="images-item" :key="item.id">
        <div class="images-card ivu-card ivu-card-bordered">
          <div class="image-header">
            <div class="image-header-img" :style="{ 'background-image': 'url(' + (item.titleimg && item.titleimg != '' ?item.titleimg:defaultTitleimg) + ')' }">
              <div class="over">
                    <h3 class="title">{{item.title}}</h3>
                  </div>
            </div>
          </div>
          <ImageNores :imgall="item.imgall"></ImageNores>
          <div >
            <Button type="primary" @click="editPhoto(item.id)" long>编辑</Button>
          </div>
        </div>
      </Col>
    </Row>

    <div class="v-transfer-dom"  v-show="show" >
			<div class="ivu-modal-mask" ></div>
		 	<div class="ivu-modal-wrap " @click="show=false">
		 		<div class="add-images"style="z-index: 1002; margin-top:10%;" @click.stop="show=true">
		 			<div class="ivu-modal-content">
		 				<a class="ivu-modal-close" @click.stop="show=false">
		 					<i class="ivu-icon ivu-icon-ios-close-empty"></i>
		 				</a> 
		 				<div class="ivu-modal-header">
		 					<div class="ivu-modal-header-inner">新建图集</div>
		 				</div>
		 				<div class="ivu-modal-body">
		 					<Input class="add-images-from" v-model="photoAlbum.title" placeholder="请输入图集名称">
		 						 <span slot="prepend">图集名称</span>
		 					</Input>
		 					<i-select v-model="photoAlbum.classify" class="add-images-from" >
				        <Option v-for="item in imgClassify" :value="item.id" :key="item.id">{{ item.title }}</Option>
					    </i-select>
					    <Input v-model="photoAlbum.content" type="textarea" placeholder="请输入图集简介" class="add-images-from" ></Input>
          	</div>
            <div class="ivu-modal-footer">
            	<div>
            		<button type="button" class="ivu-btn ivu-btn-ghost ivu-btn-large" @click.stop="show=false">取消</button> 
            		<button type="button" class="ivu-btn ivu-btn-success ivu-btn-large" @click.stop="addPhoto">确定</button> 
            	</div>
          	</div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
import ImageNores from './ImageNores.vue'
export default {
	name: 'ThePhotos',
	components: {
    ImageNores
	},
	data () {
		return {
      show:false,
      photoAlbum:{title:"",content:"",classify:0},
      photos:[],
      defaultTitleimg:'https://thumbs.dreamstime.com/z/%E6%B2%A1%E6%9C%89%E8%9A%8A%E5%AD%90-44573804.jpg',
    }
  },
  created(){
  	this.initPhotosAlbum();
    this.getPhotos();
  },
  mouted(){
  },
  computed: {
  	imgClassify:function(){
  		return this.$store.state.base.navArr.filter(function(item){
        return item.type == 'index/photo/index' && item.status > 0;
      });
  	}
  },
  methods: {
    getPhotos:function(){
      this.$http('photos/photosAlbum')
      .then((response)=>{
        this.photos=response.data;
      })
    },
  	initPhotosAlbum:function(){
  		let obj={
				title:"",
				content:"",
				classify:0,
  		};
  		this.photoAlbum=obj;
  	},
  	addPhoto:function(){
  		this.$http({
  			url:"photos/changePhotos",
  			method:"post",
  			data:this.photoAlbum,
  		})
  		.then((response)=>{
  			this.photoAlbum=response.data;
        this.photos.push(response.data);
  			this.show=false;
  		})
  	},
    editPhoto(id){
      this.$router.push({ name: 'photo', params: { id: id }})
    },
	}
}
</script>
<style >
  .images{
    max-width: 1200px;
    margin:0 auto;
  }
  .images-card{
    display: block;
    margin:10px;
    padding: 10px;
  }
  .image-add{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  .over{
    position: absolute;
    left: 10px;
    top: 10px;
  }
  .over .title{
    padding: 8px 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
  }
  .image-header{
    position: relative;
    padding-top: 100%;
    height:0;
    width: 100%;
  }
  .image-header-img{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
  }
  .image-nore , .image-nore-center{
    width: 32%;
    float: left;
    margin-top: 4px;
    margin-bottom: 10px;
  }
  .image-nore-center{
    margin-right: 2%;
    margin-left: 2%;
  }
  .add-images{
  	margin:10% auto auto;
  	max-width: 600px;
  	padding: 10px;
  }
  .add-images-from{
  	padding-bottom: 1.5rem; 
  }
</style>